<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">

	<title>豆瓣电影数据分析</title>
    {% load static %}

	<!-- Main Styles -->
	<link rel="stylesheet" href="/static/assets/styles/style.min.css">

	<!-- Material Design Icon -->
	<link rel="stylesheet" href="/static/assets/fonts/material-design/css/materialdesignicons.css">

	<!-- mCustomScrollbar -->
	<link rel="stylesheet" href="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">

	<!-- Waves Effect -->
	<link rel="stylesheet" href="/static/assets/plugin/waves/waves.min.css">

	<!-- Sweet Alert -->
	<link rel="stylesheet" href="/static/assets/plugin/sweet-alert/sweetalert.css">

	<!-- Morris Chart -->
	<link rel="stylesheet" href="/static/assets/plugin/chart/morris/morris.css">

	<!-- FullCalendar -->
	<link rel="stylesheet" href="/static/assets/plugin/fullcalendar/fullcalendar.min.css">
	<link rel="stylesheet" href="/static/assets/plugin/fullcalendar/fullcalendar.print.css" media='print'>

	<!-- Dark Themes -->
	<link rel="stylesheet" href="/static/assets/styles/style-black.min.css">
</head>

<body>
<div class="main-menu">
	<header class="header">
		<a href="index.html" class="logo"><i class="ico mdi mdi-cube-outline"></i>豆瓣电影数据分析</a>
		<button type="button" class="button-close fa fa-times js__menu_close"></button>
		<div class="user">
			<a href="#" class="avatar"><img src="/media/{% if userInfo.avatar %}{{ userInfo.avatar }}{% else %}default.jpg{% endif %}" alt=""><span class="status online"></span></a>
			<h5 class="name"><a href="profile.html">{{ userInfo.username }}</a></h5>
			<h5 class="position">{{ userInfo.info }}</h5>
			<!-- /.name -->
			<div class="control-wrap js__drop_down">
				<i class="fa fa-caret-down js__drop_down_button"></i>
				<div class="control-list">
					<div class="control-item"><a href="profile.html"><i class="fa fa-user"></i> 个人信息</a></div>
					{# <div class="control-item"><a href="#"><i class="fa fa-gear"></i> Settings</a></div>#}
					<div class="control-item"><a href="/myApp/logout/"><i class="fa fa-sign-out"></i> 退出登录</a></div>
				</div>
				<!-- /.control-list -->
			</div>
			<!-- /.control-wrap -->
		</div>
		<!-- /.user -->
	</header>
	<!-- /.header -->
	<div class="content">

		<div class="navigation">
			<h5 class="title">导航栏</h5>
			<!-- /.title -->
			<ul class="menu js__accordion">
				<li class="current">
					<a class="waves-effect" href="/myApp/home/"><i class="menu-icon mdi mdi-view-dashboard"></i><span>首页</span></a>
				</li>
				<li>
					<a class="waves-effect parent-item js__control" href="#"><i class="menu-icon mdi mdi-desktop-mac"></i><span>个人中心</span><span class="menu-arrow fa fa-angle-down"></span></a>
					<ul class="sub-menu js__content">
						<li><a href="/myApp/userInfo/">个人信息管理</a></li>
						<li><a href="/myApp/changePassword/">修改密码</a></li>
					</ul>
					<!-- /.sub-menu js__content -->
				</li>

			</ul>
			<!-- /.menu js__accordion -->
{#			<h5 class="title">Extra</h5>#}
			<!-- /.title -->
			<ul class="menu js__accordion">
				<li>
					<a class="waves-effect parent-item js__control" href="#"><i class="menu-icon mdi mdi-pencil-box"></i><span>数据表格</span><span class="menu-arrow fa fa-angle-down"></span></a>
					<ul class="sub-menu js__content">
						<li><a href="/myApp/tableData/">电影数据</a></li>
						<li><a href="/myApp/search/">搜索</a></li>
					</ul>
					<!-- /.sub-menu js__content -->
				</li>
				<li>
					<a class="waves-effect parent-item js__control" href="#"><i class="menu-icon mdi mdi-chart-areaspline"></i><span>可视化图表</span><span class="notice notice-blue">4</span></a>
					<ul class="sub-menu js__content">
						<li><a href="/myApp/typeChart/">种类分析</a></li>
						<li><a href="/myApp/countryChart/">国家分析</a></li>
						<li><a href="/myApp/timeChart/">时间分析</a></li>
						<li><a href="/myApp/commentChart/">评论分析</a></li>
					</ul>
					<!-- /.sub-menu js__content -->
				</li>
				<li>
					<a class="waves-effect parent-item js__control" href="#"><i class="menu-icon mdi mdi-file-word"></i><span>词云图</span><span class="menu-arrow fa fa-angle-down"></span></a>
					<ul class="sub-menu js__content">
						<li><a href="/myApp/titleCloud/">标题词云图</a></li>
						<li><a href="/myApp/summaryCloud/">简介词云图</a></li>
					</ul>
					<!-- /.sub-menu js__content -->
				</li>

			</ul>
			<!-- /.menu js__accordion -->
		</div>
		<!-- /.navigation -->
	</div>
	<!-- /.content -->
</div>
<!-- /.main-menu -->

<div class="fixed-navbar">
	<div class="pull-left">
		<button type="button" class="menu-mobile-button glyphicon glyphicon-menu-hamburger js__menu_mobile"></button>
		<h1 class="page-title">评论分析</h1>
		<!-- /.page-title -->
	</div>
	<!-- /.pull-left -->
	<div class="pull-right">
		<div class="ico-item">
			<a href="#" class="ico-item mdi mdi-magnify js__toggle_open" data-target="#searchform-header"></a>
			<form action="/myApp/search/" method="POST" id="searchform-header" class="searchform js__toggle" >
                <input name="searchWord" type="search" placeholder="搜索电影" class="input-search">
                <button class="mdi mdi-magnify button-search" type="submit"></button></form>
			<!-- /.searchform -->
		</div>
		<!-- /.ico-item -->
		{#  <a href="#" class="ico-item mdi mdi-email notice-alarm js__toggle_open" data-target="#message-popup"></a> #}
		{#  <a href="#" class="ico-item pulse"><span class="ico-item mdi mdi-bell notice-alarm js__toggle_open" data-target="#notification-popup"></span></a> #}
		<a href="#" class="ico-item mdi mdi-logout js__logout"></a>
	</div>
	<!-- /.pull-right -->
</div>
<!-- /.fixed-navbar -->

<div id="notification-popup" class="notice-popup js__toggle" data-space="75">
	<h2 class="popup-title">Your Notifications</h2>
	<!-- /.popup-title -->
	<div class="content">
		<ul class="notice-list">
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
					<span class="name">John Doe</span>
					<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
					<span class="time">10 min</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-sm-2.jpg" alt=""></span>
					<span class="name">Anna William</span>
					<span class="desc">Like your post: “Facebook Messenger”</span>
					<span class="time">15 min</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar bg-warning"><i class="fa fa-warning"></i></span>
					<span class="name">Update Status</span>
					<span class="desc">Failed to get available update data. To ensure the please contact us.</span>
					<span class="time">30 min</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
					<span class="name">Jennifer</span>
					<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
					<span class="time">45 min</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-sm-6.jpg" alt=""></span>
					<span class="name">Michael Zenaty</span>
					<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
					<span class="time">50 min</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
					<span class="name">Simon</span>
					<span class="desc">Like your post: “Facebook Messenger”</span>
					<span class="time">1 hour</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar bg-violet"><i class="fa fa-flag"></i></span>
					<span class="name">Account Contact Change</span>
					<span class="desc">A contact detail associated with your account has been changed.</span>
					<span class="time">2 hours</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-sm-7.jpg" alt=""></span>
					<span class="name">Helen 987</span>
					<span class="desc">Like your post: “Facebook Messenger”</span>
					<span class="time">Yesterday</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
					<span class="name">Denise Jenny</span>
					<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
					<span class="time">Oct, 28</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-sm-8.jpg" alt=""></span>
					<span class="name">Thomas William</span>
					<span class="desc">Like your post: “Facebook Messenger”</span>
					<span class="time">Oct, 27</span>
				</a>
			</li>
		</ul>
		<!-- /.notice-list -->
		<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
	</div>
	<!-- /.content -->
</div>
<!-- /#notification-popup -->

<div id="message-popup" class="notice-popup js__toggle" data-space="75">
	<h2 class="popup-title">Recent Messages<a href="#" class="pull-right text-danger">New message</a></h2>
	<!-- /.popup-title -->
	<div class="content">
		<ul class="notice-list">
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
					<span class="name">John Doe</span>
					<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
					<span class="time">10 min</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-sm-3.jpg" alt=""></span>
					<span class="name">Harry Halen</span>
					<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
					<span class="time">15 min</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
					<span class="name">Thomas Taylor</span>
					<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
					<span class="time">30 min</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
					<span class="name">Jennifer</span>
					<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
					<span class="time">45 min</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-sm-5.jpg" alt=""></span>
					<span class="name">Helen Candy</span>
					<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
					<span class="time">45 min</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
					<span class="name">Anna Cavan</span>
					<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
					<span class="time">1 hour ago</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar bg-success"><i class="fa fa-user"></i></span>
					<span class="name">Jenny Betty</span>
					<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
					<span class="time">1 day ago</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-5.jpg" alt=""></span>
					<span class="name">Denise Peterson</span>
					<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
					<span class="time">1 year ago</span>
				</a>
			</li>
		</ul>
		<!-- /.notice-list -->
		<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
	</div>
	<!-- /.content -->
</div>
<!-- /#message-popup -->
<div id="wrapper">
	<div class="main-content">

		<!-- .row -->
        <div class="row small-spacing">
			<!-- /.col-xs-12 -->

            <div class="col-lg-12 col-xs-12">
				<div class="box-content">
                    <h4 class="box-title">评论词频分析图表</h4>
{#					<h1 style="text-align: center">暂时没有数据~</h1>#}
                    <div id="mainOne" style="width: 100%;height: 430px"></div>
					<!-- /.content widget-stat -->
				</div>
				<!-- /.box-content -->
			</div>
            <div class="col-lg-6 col-xs-12">
				<div class="box-content">
                    <h4 class="box-title">评论nlp情感得分分析图表</h4>
{#					<h1 style="text-align: center">暂时没有数据~</h1>#}
                    <div id="mainTwo" style="width: 100%;height: 430px"></div>
					<!-- /.content widget-stat -->
				</div>
				<!-- /.box-content -->
			</div>
            <div class="col-lg-6 col-xs-12">
				<div class="box-content">
                    <h4 class="box-title">评论情感态度分析图表</h4>
{#					<h1 style="text-align: center">暂时没有数据~</h1>#}
                    <div id="mainThree" style="width: 100%;height: 430px"></div>
					<!-- /.content widget-stat -->
				</div>
				<!-- /.box-content -->
			</div>


			<!-- /.col-lg-4 col-xs-12 -->
			<!-- /.col-lg-6 col-xs-12 -->
		</div>


		<!-- /.row -->

	</div>
	<!-- /.main-content -->
</div><!--/#wrapper -->
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="/static/assets/script/html5shiv.min.js"></script>
		<script src="/static/assets/script/respond.min.js"></script>
	<![endif]-->
	<!--
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="/static/assets/scripts/jquery.min.js"></script>
	<script src="/static/assets/scripts/modernizr.min.js"></script>
	<script src="/static/assets/plugin/bootstrap/js/bootstrap.min.js"></script>
	<script src="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
	<script src="/static/assets/plugin/nprogress/nprogress.js"></script>
	<script src="/static/assets/plugin/sweet-alert/sweetalert.min.js"></script>
	<script src="/static/assets/plugin/waves/waves.min.js"></script>

	<!-- Morris Chart -->
	<script src="/static/assets/plugin/chart/morris/morris.min.js"></script>
	<script src="/static/assets/plugin/chart/morris/raphael-min.js"></script>
	<script src="/static/assets/scripts/chart.morris.black.init.min.js"></script>

	<!-- Flot Chart -->
	<script src="/static/assets/plugin/chart/plot/jquery.flot.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.tooltip.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.categories.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.pie.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.stack.min.js"></script>
	<script src="/static/assets/scripts/chart.flot.black.init.min.js"></script>

	<!-- Sparkline Chart -->
	<script src="/static/assets/plugin/chart/sparkline/jquery.sparkline.min.js"></script>
	<script src="/static/assets/scripts/chart.sparkline.init.min.js"></script>

	<!-- FullCalendar -->
	<script src="/static/assets/plugin/moment/moment.js"></script>
	<script src="/static/assets/plugin/fullcalendar/fullcalendar.min.js"></script>
	<script src="/static/assets/scripts/fullcalendar.init.js"></script>

	<script src="/static/assets/scripts/main.js"></script>
    <script src="/static/js/echarts.min.js"></script>

<script>
        var chartDom = document.getElementById('mainOne');
        let xData={{ xData1 | safe}}
        let yData={{ yData1 | safe}}
        let xRes=[]
        let yRes=[]
        for (var i=0;i<15;i++){
            xRes.push(xData[i])
        }
        for (var i=0;i<15;i++){
            yRes.push(yData[i])
        }
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    data: xRes
  },
    dataZoom: [{type:'slider',xAxisIndex: [0],start:0,end:90}],
    tooltip: {
      trigger: 'axis'
    },
    legend:{
      data:['词频'],
        textStyle: {color: '#ffffff'}},
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: yRes,
      type: 'bar',
        name:'词频',
        markPoint:{
          data:[
              {type:'max',name: 'Max'},
              {type: 'min',name: 'Min'}
          ]},
        markLine:{
          data:[{type:'average',name:'Avg'}]}
    }
  ]
};
option && myChart.setOption(option);
</script>
<script>
        var chartDom = document.getElementById('mainTwo');
        let xData2={{ xData | safe}}
        let yData2={{ yData | safe}}
        let xRes2=[]
        let yRes2=[]
        for (var i=0;i<10;i++){
            xRes2.push(xData2[i])
        }
        for (var i=0;i<10;i++){
            yRes2.push(yData2[i])
        }
var myChart = echarts.init(chartDom);
var option;
option = {
  xAxis: {
    type: 'value'
  },
    tooltip: {
      trigger: 'axis'
    },
    legend:{
      data:['得分数量'],
        textStyle: {color: '#ffffff'}},
  yAxis: {
      type: 'category',
    data: xRes2
  },
  series: [
    {
      data: yRes2,
      type: 'bar',
        name:'得分数量',
        markPoint:{
          data:[
              {type:'max',name: 'Max'},
              {type: 'min',name: 'Min'}
          ]},
        markLine:{
          data:[{type:'average',name:'Avg'}]}
    }
  ]
};
option && myChart.setOption(option);
</script>
<script>
    var chartDom = document.getElementById('mainThree');
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
      textStyle:{color:'#fff'}
  },
  series: [
    {
      name: '情感',
      type: 'pie',
      radius: '50%',
      data: {{ result | safe }},
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

option && myChart.setOption(option);
</script>

</body>
</html>